<template>
	<view class="register-container">
		<!-- 表单内容 -->
		<scroll-view class="form-content" scroll-y>
			<!-- 蓝色头部区域 -->
			<view class="blue-header">
				<view class="header-content">
					<view class="back-btn" @click="goBack">
						<uni-icons type="left" size="20" color="#fff"></uni-icons>
					</view>
					<text class="header-title">注册</text>
					<view class="header-right">
						<view class="header-right-container">
							<view class="header-icon">
								<text>⋯</text>
							</view>
							<view class="header-icon active">
								<view class="target-icon"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 基本信息卡片：负责人到地址 -->
			<view class="card first-card">
				<!-- 负责人 -->
				<view class="form-item">
					<text class="label">负责人:</text>
					<input 
						class="input" 
						v-model="formData.personInCharge" 
						placeholder="输入负责人姓名"
					/>
				</view>
				
				<!-- 身份证号码 -->
				<view class="form-item">
					<text class="label">身份证号码:</text>
					<input 
						class="input" 
						v-model="formData.idNumber" 
						placeholder="输入负责人身份证号码"
						type="idcard"
					/>
				</view>
				
				<!-- 手机号 -->
				<view class="form-item">
					<text class="label">手机号:</text>
					<input 
						class="input" 
						v-model="formData.phone" 
						placeholder="输入手机号"
						type="number"
						maxlength="11"
					/>
				</view>
				
				<!-- 验证码 -->
				<view class="form-item code-item">
					<text class="label">验证码:</text>
					<view class="code-wrapper">
						<input 
							class="input code-input" 
							v-model="formData.verifyCode" 
							placeholder="输入验证码"
							type="number"
							maxlength="6"
						/>
						<view class="code-divider"></view>
						<button 
							class="get-code-btn" 
							:disabled="countdown > 0 || !formData.phone"
							@click="handleGetCode"
						>
							{{ countdown > 0 ? `${countdown}秒` : '获取验证码' }}
						</button>
					</view>
				</view>
				
				<!-- 店名 -->
				<view class="form-item">
					<text class="label">店名:</text>
					<input 
						class="input" 
						v-model="formData.storeName" 
						placeholder="输入店名"
					/>
				</view>
				
				<!-- 工商营业执照号码 -->
				<view class="form-item">
					<text class="label">工商营业执照号码:</text>
					<input 
						class="input" 
						v-model="formData.licenseNumber" 
						placeholder="输入营业执照号码"
					/>
				</view>
				
				<!-- 经营区域 -->
				<view class="form-item">
					<text class="label">经营区域:</text>
					<picker 
						mode="selector" 
						:range="areaList" 
						:value="areaIndex"
						@change="onAreaChange"
						class="picker-wrapper"
					>
						<view class="picker-input">
							<input 
								class="input" 
								:value="formData.area || ''" 
								placeholder="选择区县"
								disabled
							/>
							<image class="arrow-icon" src="/static/zhuce/收起箭头小@3x.png" mode="aspectFit"></image>
						</view>
					</picker>
				</view>
				
				<!-- 地址 -->
				<view class="form-item">
					<text class="label">地址:</text>
					<input 
						class="input" 
						v-model="formData.address" 
						placeholder="输入详细地址"
					/>
				</view>
			</view>
			
			<!-- 商家简介卡片 -->
			<view class="card">
				<view class="form-item textarea-item">
					<text class="label">商家简介</text>
					<textarea 
						class="textarea" 
						v-model="formData.profile" 
						placeholder="请准确的介绍一下公司的情况"
						maxlength="500"
					></textarea>
				</view>
			</view>
			
			<!-- 身份证正反面照片卡片 -->
			<view class="card">
				<view class="upload-section">
					<text class="upload-title">身份证正反面照片</text>
					<view class="upload-row">
						<view class="upload-box" @click="chooseImage('idCardFront')">
							<image v-if="images.idCardFront" :src="images.idCardFront" class="uploaded-image" mode="aspectFill"></image>
							<view v-else class="upload-placeholder">
								<image class="plus-icon" src="/static/zhuce/加号@3x.png" mode="aspectFit"></image>
								<text class="upload-text">上传人像面</text>
							</view>
						</view>
						<view class="upload-box" @click="chooseImage('idCardBack')">
							<image v-if="images.idCardBack" :src="images.idCardBack" class="uploaded-image" mode="aspectFill"></image>
							<view v-else class="upload-placeholder">
								<image class="plus-icon" src="/static/zhuce/加号@3x.png" mode="aspectFit"></image>
								<text class="upload-text">上传国徽面</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 营业执照卡片 -->
			<view class="card">
				<view class="upload-section">
					<text class="upload-title">营业执照</text>
					<view class="upload-row">
						<view class="upload-box" @click="chooseImage('license')">
							<image v-if="images.license" :src="images.license" class="uploaded-image" mode="aspectFill"></image>
							<view v-else class="upload-placeholder">
								<image class="plus-icon" src="/static/zhuce/加号@3x.png" mode="aspectFit"></image>
								<text class="upload-text">上传照片</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 门店照片卡片 -->
			<view class="card">
				<view class="upload-section">
					<text class="upload-title">门店照片</text>
					<view class="upload-row">
						<view class="upload-box" @click="chooseImage('store')">
							<image v-if="images.store" :src="images.store" class="uploaded-image" mode="aspectFill"></image>
							<view v-else class="upload-placeholder">
								<image class="plus-icon" src="/static/zhuce/加号@3x.png" mode="aspectFit"></image>
								<text class="upload-text">上传照片</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 注册按钮 -->
			<view class="register-btn-wrapper">
				<button class="register-btn" @click="handleRegister">注册</button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					personInCharge: '',
					idNumber: '',
					phone: '',
					verifyCode: '',
					storeName: '',
					licenseNumber: '',
					area: '',
					address: '',
					profile: ''
				},
				images: {
					idCardFront: '',
					idCardBack: '',
					license: '',
					store: ''
				},
				countdown: 0,
				timer: null,
				areaList: ['朝阳区', '海淀区', '丰台区', '西城区', '东城区', '石景山区'],
				areaIndex: 0,
				currentUploadType: ''
			}
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			handleGetCode() {
				if (!this.formData.phone || this.formData.phone.length !== 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				// TODO: 调用获取验证码接口
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				})
				
				// 开始倒计时
				this.countdown = 60
				this.timer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
						clearInterval(this.timer)
						this.timer = null
					}
				}, 1000)
			},
			chooseImage(type) {
				this.currentUploadType = type
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.images[type] = res.tempFilePaths[0]
					}
				})
			},
			onAreaChange(e) {
				this.areaIndex = e.detail.value
				this.formData.area = this.areaList[e.detail.value]
			},
			handleRegister() {
				// 表单验证
				if (!this.formData.personInCharge) {
					uni.showToast({
						title: '请输入负责人姓名',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.idNumber) {
					uni.showToast({
						title: '请输入身份证号码',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.phone || this.formData.phone.length !== 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				if (!this.formData.verifyCode) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				
				// TODO: 实现注册逻辑
				uni.showToast({
					title: '注册成功',
					icon: 'success'
				})
				
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register-container {
		width: 100%;
		height: 100vh;
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
	}
	
	.form-content {
		flex: 1;
		height: 100vh;
		overflow-y: auto;
		background: #f5f5f5;
		position: relative;
		padding: 0;
	}
	
	.blue-header {
		background: #007aff;
		padding-top: var(--status-bar-height, 44px);
		position: relative;
		width: 100%;
		min-height: 300rpx;
		padding-bottom: 20rpx;
	}
	
	.header-content {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		position: relative;
	}
	
	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.header-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}
	
	.header-right {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	
	.header-right-container {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 40rpx;
		padding: 8rpx 12rpx;
		gap: 8rpx;
	}
	
	.header-icon {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: transparent;
		
		text {
			color: #fff;
			font-size: 32rpx;
			line-height: 1;
		}
		
		&.active {
			background: rgba(255, 255, 255, 0.3);
		}
	}
	
	.target-icon {
		width: 24rpx;
		height: 24rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		position: relative;
		
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 8rpx;
			height: 8rpx;
			background: #fff;
			border-radius: 50%;
		}
	}
	
	.card {
		background: #fff;
		border-radius: 16rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.first-card {
		margin-top: -60rpx;
		border-radius: 20rpx 20rpx 16rpx 16rpx;
	}
	
	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.label {
			min-width: 200rpx;
			font-size: 28rpx;
			color: #333;
			flex-shrink: 0;
		}
		
		.input {
			flex: 1;
			height: 70rpx;
			background: #f8f8f8;
			border: 1rpx solid #e0e0e0;
			border-radius: 12rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			color: #333;
		}
		
		.input::placeholder {
			color: #999;
		}
	}
	
	.code-item {
		.code-wrapper {
			flex: 1;
			display: flex;
			align-items: center;
			background: #f8f8f8;
			border: 1rpx solid #e0e0e0;
			border-radius: 12rpx;
			
			.code-input {
				flex: 1;
				height: 70rpx;
				border: none;
				background: transparent;
			}
			
			.code-divider {
				width: 1rpx;
				height: 40rpx;
				background: #e0e0e0;
			}
			
			.get-code-btn {
				padding: 0 20rpx;
				height: 70rpx;
				line-height: 70rpx;
				background: transparent;
				color: #007aff;
				font-size: 26rpx;
				border: none;
				white-space: nowrap;
				
				&::after {
					border: none;
				}
				
				&:disabled {
					color: #999;
				}
			}
		}
	}
	
	.picker-wrapper {
		flex: 1;
		
		.picker-input {
			position: relative;
			display: flex;
			align-items: center;
			
			.arrow-icon {
				position: absolute;
				right: 20rpx;
				width: 24rpx;
				height: 24rpx;
				transform: rotate(180deg);
				z-index: 1;
			}
		}
	}
	
	.textarea-item {
		align-items: flex-start;
		
		.label {
			margin-top: 10rpx;
		}
		
		.textarea {
			flex: 1;
			min-height: 200rpx;
			background: #f8f8f8;
			border: 1rpx solid #e0e0e0;
			border-radius: 12rpx;
			padding: 20rpx;
			font-size: 28rpx;
			color: #333;
		}
		
		.textarea::placeholder {
			color: #999;
		}
	}
	
	.upload-section {
		.upload-title {
			display: block;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.upload-row {
			display: flex;
			gap: 20rpx;
		}
		
		.upload-box {
			width: 160rpx;
			height: 160rpx;
			background: #f8f8f8;
			border: 1rpx solid #e0e0e0;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			overflow: hidden;
			
			.uploaded-image {
				width: 100%;
				height: 100%;
			}
			
			.upload-placeholder {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				
				.plus-icon {
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 8rpx;
				}
				
				.upload-text {
					font-size: 22rpx;
					color: #999;
				}
			}
		}
	}
	
	.register-btn-wrapper {
		padding: 30rpx;
		margin-top: 20rpx;
		margin-bottom: 40rpx;
	}
	
	.register-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(135deg, #007aff 0%, #0051d5 100%);
		color: #fff;
		border: none;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		
		&::after {
			border: none;
		}
		
		&:active {
			opacity: 0.8;
		}
	}
</style>
